<template>
    <div style="background: #93defe;height: 100%">
        <div>
            <div class="logo">
                <img src="http://edu.os.roncoo.com/admin/static/img/login-img.ca4e6fe.png">
            </div>
            <div class="login_div">
                <div class="login_img">
                    <img class="login_logo_img" src="@/assets/index.png">
                </div>
                <div class="login_data">
                    <span class="login_data_font">阿里里教育系统</span>
                    <div class="login_data_div">
                        <div class="div_input">
                            <el-input prefix-icon="el-icon-user-solid" class="login_input" v-model="backLoginData.username" placeholder="请输入用户名"></el-input>
                        </div>
                        <div class="div_input">
                            <el-input prefix-icon="el-icon-lock" class="login_input" v-model="backLoginData.password" placeholder="请输入密码" show-password></el-input>
                        </div>
                        <el-button class="login_input" type="primary" @click="backLogin">登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "backlogin",
        data(){
            return{
                backLoginData:{}
            }
        },
        methods:{
            backLogin(){
                var that =this;
                this.$http.post(`/sso/backLogin`,that.backLoginData).then(function (success) {
                    // console.log(success);
                    if (success.data.code==200){
                        that.$message.success(success.data.msg);
                        //把用户的key保存起来. sessionStorage   | localStorage 本地
                        sessionStorage.setItem("token",success.data.result);
                        that.$router.push('/pagehome')
                    }else {
                        that.$message.error(success.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>

    .login_logo_img {
        width: 60px;
        height: 60px;
        display: inline-block;
        vertical-align: middle;
    }
    .login_img {
        width: 120px;
        height: 120px;
        border: 5px solid #93defe;
        border-radius: 100px;
        background: #fff;
        text-align: center;
        line-height: 100px;
        position: absolute;
        top: -50px;
        right: 155px;
    }
    .login_data{
        width: 460px;
        height: 430px;
        background: white;
        float: right;
        border-radius: 6px;
    }
    .login_div{
        position: absolute;
        left: 780px;
        top: 150px;
    }
    .logo{
        position: absolute;
        left: 220px;
        top: 150px;
    }
    .login_data_font {
        position: relative;
        top: 100px;
        left: 135px;
        font-size: 26px;
        font-weight: 400;
        color: black;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
    }
    .login_input{

        border: none;
        width: 330px;
        height: 47px;
    }
    .login_data_div{
        position: relative;
        top: 150px;
        left: 85px;
    }
</style>